<template>
  <view class="container screen-width">
    <view class="msg-filter">
      <view @click="show = true">{{ params.type || "类型" }}</view>
      <u-icon class="u-m-l-20" name="arrow-down" size="11"></u-icon>
    </view>
    <scroll-view class="list" :scroll-y="true" @scrolltolower="fetchData()">
      <view class="item" v-for="(item,index) in list" :key="index">
        <view class="content">
          <text v-html="item.formatContent"></text>
        </view>
        <view class="time">{{item.createTime}}</view>
      </view>
      <u-loadmore
        bg-color="#F8F9FD"
        style="width: 100%; margin-top: 15rpx; padding-right: 30rpx"
        :status="status"
      />
    </scroll-view>
    <u-select v-model="show" :list="typeList" mode="single-column" @confirm="confirm"></u-select>
    <Festival></Festival>
  </view>
</template>

<script>
import { getMsgType, getMsgList } from "../../util/api/user";
export default {
  data() {
    return {
      show: false,
      list: [],
      typeList: [],
      status: "loadmore",
      params: {
        type: null,
        pageNo: 1,
        pageSize: 15
      }
    };
  },
  onLoad() {
    getMsgType().then(res => {
      this.$nextTick(() => {
        this.typeList = res.result.map(v => {
          return {
            label: v,
            value: v
          };
        });
      });
    });
    this.fetchData();
  },
  methods: {
    confirm(e) {
      this.$nextTick(() => {
        this.params.type = e[0].value;
        this.fetchData(true);
      });
    },
    fetchData(reset = false) {
      if (reset) {
        this.resetPagination();
      }
      uni.showLoading();
      this.status = "loading";
      getMsgList(this.params).then(res => {
        uni.hideLoading();
        let records = res.result.records; // uni.stopPullDownRefresh();
        if (!records.length) {
          this.status = "nomore";
          return;
        }
        this.list = reset ? records : this.list.concat(records);
        this.params.pageNo += 1;
        this.status = "loadmore";
      });
    },
    resetPagination() {
      this.params.pageNo = 1;
      this.list = [];
      this.status = "loadmore";
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding: 0 30rpx;
  padding-top: 30rpx;
  height: 100%;

  .msg-filter {
    height: 56rpx;
    opacity: 1;
    background: #ffffff;
    border-radius: 8rpx;
    margin-bottom: 32rpx;
    color: #1678ff;
    padding: 0 35rpx;
    flex-grow: 0;
    flex-shrink: 1;
    width: auto;
    display: inline-flex;
    align-items: center;
  }

  .list {
    height: calc(100% - 88rpx);

    .item {
      background: #fff;
      min-height: 220rpx;
      border-radius: 16rpx;
      padding: 20rpx 40rpx 24rpx 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: 20rpx;

      .content {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;

        &-hint {
          color: #1678ff;
        }
      }
      .time {
        font-size: 22rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #aaaaaa;
      }
    }
  }
}
</style>
